<template>
    <div id="menus">
      <el-row>
        <el-col :span="12" >
            <el-menu
                :default-active="menuDefault"
                :unique-opened=true>
              <template v-for="item in menuList" >
                <div @click="select(item.children)">
                  <el-menu-item :key="item.id" :index="'/'+item.path"
                              v-if="item.children !== null" >
                    <template slot="title" >
                      <i v-if="item.icon !== null" :class="item.icon"></i>
                      <span slot="title" >{{item.name}}</span>
                    </template>
                  </el-menu-item>
                </div>
              </template>
            </el-menu>
        </el-col>
        <el-col :span="12" >
          <el-menu
              router
              :default-active="menuRightDefault">
            <template v-for="item in menuListRight" >
              <el-menu-item-group :title="item.name" >
                <el-menu-item v-for="val in item.children" :index="'/'+item.path+'/'+val.path" :key="val.id">
                  <i v-if="val.icon !== null" :class="val.icon"></i>
                  <span slot="title">{{ val.name }}</span>
                </el-menu-item>
              </el-menu-item-group>
            </template>
          </el-menu>
        </el-col>
      </el-row>
    </div>
</template>

<script>

import router from "../router";

export default {
  name: "menus",
  data(){
    return{
      menuList:[],
      menuListRight:[],
      menuDefault:'',
      menuRightDefault:''
    }
  },
  methods:{
    menuListSelect(key, keyPath) {
      console.log("select:"+key, keyPath);
    },
    select(rightMenu){
      this.menuListRight=rightMenu
    },
    toHome(){
      router.replace(this.menuRightDefault)
    },
  },
  mounted() {
    this.$http.get("/user/getMenus?lv=5").then(res => {
      this.menuList = res.data;
      this.menuDefault='/'+this.menuList[0].path
      this.menuListRight = this.menuList[0].children
      this.menuRightDefault='/'+this.menuListRight[0].path+'/'+this.menuListRight[0].children[0].path
      this.$router.push(this.menuRightDefault)
    });

  }
}
</script>

<style>
html,body,#menus,.el-row,.el-col,.el-menu {
  height: 100%;
}
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
  display: none;
}
.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
  display: none;
}
</style>